<template>
  <div class="con">
    <el-container>
      <!-- <el-header style="padding:0;height: 56px;">
        <headbox ref="mychild"></headbox>
      </el-header>
      <el-container>
        <el-aside  style="width:200px;background-color:#393D49;">
          <left></left>
        </el-aside>
      <el-container> -->
      <el-main style="padding:0;">
        <!-- 充值提现 -->
        <div class="contbox6_10">
          <p class="titlelist6_10">
            我的信息
            <span style="color: #999;">&nbsp;&nbsp;/&nbsp;&nbsp;</span>结算信息
            <span style="color: #999;">&nbsp;&nbsp;/&nbsp;&nbsp;</span
            >充值提现记录
          </p>
          <div class="content">
            <div class="sousuojg6_10">
              <el-form
                :model="formInline"
                class="demo-form-inline"
                label-width="100px"
              >
                <el-form-item label="订单号">
                  <el-input
                    v-model="formInline.channelOrderCode"
                    placeholder="请输入订单号"
                  ></el-input>
                </el-form-item>
                <el-form-item label="账户号码">
                  <el-input
                    v-model="formInline.accountNo"
                    placeholder="请输入账户号码"
                  ></el-input>
                </el-form-item>
                <el-form-item label="操作类型" v-if="jurisdiction == 0">
                  <el-select
                    v-model="formInline.channelType"
                    placeholder="请选择"
                  >
                    <el-option label="提现" value="1"></el-option>
                    <el-option label="充值" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="状态">
                  <el-select v-model="formInline.status" placeholder="请选择">
                    <el-option label="成功" value="0"></el-option>
                    <el-option label="失败" value="1"></el-option>
                    <el-option label="待审核" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="发起时间">
                  <el-date-picker
                    v-model="DataTime"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="审核时间" v-if="jurisdiction == 0">
                  <el-date-picker
                    v-model="DataTimes"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="完成时间" v-if="jurisdiction == 2">
                  <el-date-picker
                    v-model="DataTimes"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </el-form-item>
              </el-form>
            </div>
            <div class="buttons">
              <el-button type="primary" @click="queryPayActiveList"
                >搜索</el-button
              >
              <!-- <el-button style="margin-left:10px">重置</el-button> -->
              <el-button
                v-if="totalNum > 0"
                type="primary"
                style="margin-left:40px"
                @click="onSubmit"
                class="butt"
                >批量导出</el-button
              >
            </div>
            <el-table
              :data="tableData"
              :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
              stripe
              border
              :row-style="{ height: '0px' }"
              :cell-style="{ padding: '0px' }"
              v-loading="listLoading"
              :fit="true"
            >
              <el-table-column
                type="selection"
                min-width="40"
              ></el-table-column>
              <el-table-column
                prop="channelOrderCode"
                min-width="250"
                label="订单号"
              ></el-table-column>
              <el-table-column
                prop="dealMoney"
                min-width="150"
                label="订单金额"
              ></el-table-column>
              <el-table-column
                prop="serviceCharge"
                min-width="200"
                label="手续费"
              ></el-table-column>
              <el-table-column
                prop="realityMoney"
                min-width="200"
                label="实际发生金额"
              ></el-table-column>
              <el-table-column
                prop="accountNo"
                min-width="200"
                label="账户号码"
                v-if="jurisdiction == 0"
              ></el-table-column>
              <el-table-column
                min-width="200"
                label="操作类型"
                v-if="jurisdiction == 0"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.channelType == 1">提现</span>
                  <span v-if="scope.row.channelType == 2">充值</span>
                </template>
              </el-table-column>
              <el-table-column min-width="200" label="发起时间">
                <template slot-scope="scope">
                  {{ scope.row.createDate }}
                </template>
              </el-table-column>
              <el-table-column
                min-width="200"
                label="审核时间"
                v-if="jurisdiction == 0"
              >
                <template slot-scope="scope">
                  {{ scope.row.auditDate }}
                </template>
              </el-table-column>
              <el-table-column
                min-width="200"
                label="完成时间"
                v-if="jurisdiction == 2"
              >
                <template slot-scope="scope">
                  {{ scope.row.auditDate }}
                </template>
              </el-table-column>
              <el-table-column min-width="100" label="状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.status == 0">成功</span>
                  <span v-if="scope.row.status == 1">失败</span>
                  <span v-if="scope.row.status == 2">待审核</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="address"
                min-width="120"
                label="操作"
                v-if="jurisdiction == 0"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="
                      queryWithdrawDedail(
                        scope.row.channelOrderCode,
                        scope.row.channelType,
                        scope.row.status
                      )
                    "
                    size="mini"
                    >查看详情</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <el-pagination
              background
              style="text-align: right;"
              class="pagination"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="formInline.page"
              :page-size="formInline.number"
              layout="total, sizes, prev, pager, next, jumper"
              :page-sizes="[10, 20, 30, 40, 50]"
              :total="totalNum"
            ></el-pagination>
          </div>
        </div>
        <!-- 查看弹框 -->
        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="40%"
          :before-close="handleCloses"
          append-to-body
          :close-on-click-modal="false"
        >
        
          <!-- <span v-if='scope.row.channelType == 1'>提现</span>
      <span v-if='scope.row.channelType == 2'>充值</span> -->
          <!-- <span v-if='scope.row.status == 0'>成功</span>
      <span v-if='scope.row.status == 1'>失败</span>
      <span v-if='scope.row.status == 2'>待审核</span> -->

          <p class="status" v-if="channelType == 2 && status == 2">
            <i class="el-icon-warning color"></i
            >充值申请正在审核中，预计1-3个工作日
          </p>
          <p class="status" v-if="channelType == 1 && status == 2">
            <i class="el-icon-warning color"></i
            >提现申请正在审核中，预计1-3个工作日
          </p>
          <p class="status" v-if="channelType == 2 && status == 0">
            <i class="el-icon-warning color"></i>本次充值已完成！
          </p>
          <p class="status" v-if="channelType == 1 && status == 0">
            <i class="el-icon-warning color"></i>本次提现已完成！
          </p>
          <p class="status" v-if="channelType == 2 && status == 1">
            <i class="el-icon-warning color"></i>本次充值失败
          </p>
          <p class="status" v-if="channelType == 1 && status == 0">
            <i class="el-icon-warning color"></i>本次提现失败
          </p>

          <!-- 充值 -->
          <div class="money">
            <!-- <p>充值账户：支付宝</p> -->
            <!-- <p>账户号码：{{this.detailsData.withdrawBank}}</p> -->
            <p>充值金额：{{ this.detailsData.dealMoney }}</p>
            <p v-if="channelType == 1">
              提现金额：{{ this.detailsData.dealMoney }}
            </p>
            <p v-if="channelType == 1">
              实际到账金额：{{ this.detailsData.realityMoney }}
            </p>
            <p v-if="status == 0">
              当前状态：
              <span v-if="this.detailsData.status == 0">成功</span>
              <span v-if="this.detailsData.status == 1">失败</span>
              <span v-if="this.detailsData.status == 2">待审核</span>
            </p>
            <p
              v-if="
                (channelType == 2 && status == 1) ||
                  (channelType == 2 && status == 2)
              "
            >
              充值截图：
            </p>
            <p
              v-if="
                (channelType == 2 && status == 1) ||
                  (channelType == 2 && status == 2)
              "
            >
              <img class="img" :src="this.detailsData.imgUrl" alt />
            </p>
            <!-- {{remarks}} -->
            <p
              v-if="
                (channelType == 1 && status == 1) ||
                  (channelType == 2 && status == 1)
              "
            >
              失败原因：
            </p>
            <p
              v-if="
                (channelType == 1 && status == 1) ||
                  (channelType == 2 && status == 1)
              "
            >
              {{ this.detailsData.remarks }}
            </p>
          </div>
          <span slot="footer" class="dialog-footer">
            <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
            <el-button type="primary" @click="dialogVisible = false"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </el-main>
      <!-- <el-footer style="padding:0;">
      <footerbox></footerbox>
    </el-footer> -->
    </el-container>
    <!-- </el-container>
    </el-container> -->
  </div>
</template>
<script type="text/ecmascript-6">
import https from '../../plugins/https'
export default {
  data() {
    return {
      detailsData: {},
      formInline: {
        oemUid: localStorage.getItem('jurisdiction') == 0 ? localStorage.getItem('uid') : '',
        officeUid: localStorage.getItem('jurisdiction') == 2 ? localStorage.getItem('uid') : '',
        channelOrderCode: '',
        channelType: '',
        accountNo: '',
        status: '',
        startDate: '',
        endDate: '',
        auditStartDate: '',
        auditEndDate: '',
        page: 1,
        number: 10
      },
      DataTime: [],
      DataTimes: [],
      dialogVisible: false,
      currentPage: 1, //默认显示第一页
      pageSize: 1, //默认每页显示10条
      totalNum: 0, //总页数
      form: {},
      tableData: [],
      channelType: '',
      status: '',
      form: false,
      jurisdiction : '',
    };
  },
  components: {
  },
  mounted () {
    this.queryPayActiveList()
   this.jurisdiction = localStorage.getItem('jurisdiction');
  },
  methods: {
    // 点击查看详情
    queryWithdrawDedail (channelOrderCode,channelType,status) {
      // withdrawBank
      https.queryWithdrawDedail({channelOrderCode:channelOrderCode}).then(res => {
        if (res.data.code !== '0000') {
          // this.$notify({title: "错误",message: res.data.msg,type: "error"});
          layer.open({
              content: res.data.msg,
              skin: "msg",
              time:  2, //1秒后自动关闭
            });
          this.listLoading = false
          return
        }
        // this.$notify({title: "成功",message: res.data.msg,type: "success"});
        this.listLoading = false
        this.dialogVisible = true
        this.channelType = channelType
        this.status = status
        this.detailsData = res.data.dowithdrawReponse
      })
    },
    // 渲染
    queryPayActiveList() {
      if (this.form == true) return
      this.form = true

      if (this.DataTime === null) this.DataTime = []
      this.formInline.startDate = this.DataTime[0]
      this.formInline.endDate = this.DataTime[1]
      if (this.DataTimes === null) this.DataTimes = []
      this.formInline.auditStartDate = this.DataTimes[0]
      this.formInline.auditEndDate = this.DataTimes[1]
      console.log(333333)
      https.querySubWithdrawlist(this.formInline).then(res => {
        if (res.data.code !== '0000') {
          // this.$notify({title: "错误",message: res.data.msg,type: "error"});
          layer.open({
              content: res.data.msg,
              skin: "msg",
              time:  2, //1秒后自动关闭
            });
          this.listLoading = false
          this.form = false
          return
        }
        // this.$notify({title: "成功",message: res.data.msg,type: "success"});
        this.listLoading = false
        this.form = false
        this.tableData = res.data.dowithdrawReponse
      })
    },
    onSubmit () {},
    onAdd() {},
    handleSizeChange(val) {
      this.formInline.pageSize = val; //动态改变
    },
    handleCurrentChange(val) {
      this.formInline.page = val; //动态改变

    },
    handleCloses(done) {
      this.dialogVisible = false;
    },
    auditShop() {}
  }
};
</script>
<style scoped>
.con {
  position: relative;
}
.content {
  min-width: calc(100% - 40px);
}
.el-icon-warning {
  margin-right: 10px;
}
.img {
  display: block;
  width: 75%;
  height: 200px;
  border: 1px solid #ccc;
  margin: 20px auto;
}
.money p {
  width: 100%;
  line-height: 40px;
  font-weight: 500;
}
.status {
  font-size: 14px;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 500;
}
.color {
  color: #e6a23c;
}
.mt20 {
  margin-top: 20px;
}
.shopList {
  width: 100%;
  border-bottom: 1px solid #ccc;
  line-height: 50px;
  font-size: 16px;
}
.formItem {
  float: left;
}
.pagination {
  margin-top: 10px;
}
.btnExport {
  color: #409eff;
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
}
.btn {
  float: right;
}
.contbox6_10 {
  width: 100%;
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.buttons > .el-button {
  width: 100px;
  padding: 7px;
  height: 32px;
}
</style>
